<template>
	<view class="score-rules">
		<!-- 积分规则说明 -->
		<view class="rules-section">
			<view class="section-title">积分获取规则</view>
			<view class="rules-list">
				<view class="rule-item">
					<text class="dot">·</text>
					<text class="content">每日签到：+5积分</text>
				</view>
				<view class="rule-item">
					<text class="dot">·</text>
					<text class="content">消费1元：+1积分</text>
				</view>
				<view class="rule-item">
					<text class="dot">·</text>
					<text class="content">评价订单：+10积分</text>
				</view>
				<view class="rule-item">
					<text class="dot">·</text>
					<text class="content">分享商品：+2积分</text>
				</view>
				<view class="rule-item">
					<text class="dot">·</text>
					<text class="content">邀请新用户：+50积分</text>
				</view>
			</view>
		</view>
		
		<!-- 积分使用规则 -->
		<view class="rules-section">
			<view class="section-title">积分使用规则</view>
			<view class="rules-list">
				<view class="rule-item">
					<text class="dot">·</text>
					<text class="content">积分可用于兑换商城商品</text>
				</view>
				<view class="rule-item">
					<text class="dot">·</text>
					<text class="content">积分兑换后不可退回</text>
				</view>
				<view class="rule-item">
					<text class="dot">·</text>
					<text class="content">部分商品限购，请查看商品详情</text>
				</view>
				<view class="rule-item">
					<text class="dot">·</text>
					<text class="content">积分有效期为一年</text>
				</view>
			</view>
		</view>
		
		<!-- 积分记录 -->
		<view class="rules-section">
			<view class="section-title">积分记录</view>
			<view class="score-records">
				<view class="record-item" v-for="(item, index) in scoreRecords" :key="index">
					<view class="record-info">
						<text class="record-type">{{item.type}}</text>
						<text class="record-time">{{item.time}}</text>
					</view>
					<text class="record-score" :class="{ 'plus': item.score > 0 }">
						{{item.score > 0 ? '+' : ''}}{{item.score}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const scoreRecords = ref([])

// 获取积分记录
const getScoreRecords = async () => {
	try {
		const res = await uni.request({
			url: '/api/user/score/records',
			method: 'GET'
		})
		scoreRecords.value = res.data
	} catch (e) {
		console.error('获取积分记录失败', e)
	}
}

onMounted(() => {
	getScoreRecords()
})
</script>

<style lang="scss">
.score-rules {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20px;
	
	.rules-section {
		background-color: #fff;
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 20px;
		
		.section-title {
			font-size: 16px;
			color: #333;
			font-weight: bold;
			margin-bottom: 15px;
			position: relative;
			padding-left: 10px;
			
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4px;
				height: 16px;
				background-color: #ff4d4f;
				border-radius: 2px;
			}
		}
		
		.rules-list {
			.rule-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 10px;
				
				.dot {
					color: #ff4d4f;
					margin-right: 5px;
				}
				
				.content {
					color: #666;
					font-size: 14px;
					line-height: 1.5;
				}
			}
		}
		
		.score-records {
			.record-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 0;
				border-bottom: 1px solid #f5f5f5;
				
				&:last-child {
					border-bottom: none;
				}
				
				.record-info {
					.record-type {
						font-size: 14px;
						color: #333;
						margin-bottom: 5px;
						display: block;
					}
					
					.record-time {
						font-size: 12px;
						color: #999;
					}
				}
				
				.record-score {
					font-size: 16px;
					color: #666;
					font-weight: bold;
					
					&.plus {
						color: #ff4d4f;
					}
				}
			}
		}
	}
}
</style> 